<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <title>优惠劵列表</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'publc/font-awesome-4.7.0/css/font-awesome.min.css' %}">
</head>
<body>
<div>
    <h3>优惠卷列表</h3>
    <a href="{% url 'coupon_add' %}" class="btn btn-info">添加</a>
</div>
<div>
    <div class="bs-example" data-example-id="hoverable-table">

        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">优惠卷信息</h3>
            </div>
            <div class="panel-body">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>封面</th>
                        <th>活动</th>
                        <th>打折类型</th>
                        <th>范围</th>
                        <th>状态</th>
                        <th>使用限制</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>总数量</th>
                        <th>剩余</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for coupon in coupon_query %}
                        <tr>
                            <th scope="row">{{ forloop.counter }}</th>
                            <td><img src="https://{{ coupon.cover }}" alt="" width="60rpx"></td>
                            <td><a href="">{{ coupon.title.title }}</a></td>
                            <td>{{ coupon.coupon_type.get_coupon_type_display }}</td>
                            <td>{{ coupon.get_ranges_display }}</td>
                            <td>{{ coupon.get_status_display }}</td>
                            <td>满：{{ coupon.use_limit }}￥使用</td>
                            <td>{{ coupon.start_time }}</td>
                            <td>{{ coupon.end_time }}</td>
                            <td>{{ coupon.total_count }}</td>
                            <td>{{ coupon.surplus_count }}</td>
                            <td>
                                <a href="{% url 'coupon_edit' pk=coupon.id %}"><i class="fa fa-wrench"
                                                                                  aria-hidden="true"></i>
                                </a>|

                                <a class="btn btn-danger btn-xs"
                                   data-toggle="modal"
                                   data-target="#alertModal"
                                   data-fid="{{ coupon.id }}">
                                    <i class="fa fa-window-close"
                                       aria-hidden="true"
                                       style="color: red">
                                    </i>
                                </a>

                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!--删除模态框+警告框-->
        <div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">

                <div class="alert alert-danger alert-dismissible fade in" role="alert">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h4>是否要确定删除？</h4>
                    <p style="padding-top: 20px;padding-bottom: 20px;">
                        该优惠劵会被删除，有可能影响用户体验！！！
                    </p>
                    <p style="text-align: right">
                        <a href="" class="btn btn-default" data-dismiss="modal" aria-label="Close">取消</a>
                        <button type="button" class="btn btn-danger" id="btnDelete">确认</button>
                    </p>
                </div>
            </div>
        </div>


    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
    let DELETE_AUCTION_URL = '{% url "coupon_del" %}'
    $(function () {

        initalertModel();
        deleteAuction();
    })

    // 动态删除

    function initalertModel() {
        $('#alertModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // 获取按钮对象
            var fid = button.data('fid'); // 获取传入的值  data-..
            $('#btnDelete').attr('fid', fid);
        })
    }


    function deleteAuction() {

        $('#btnDelete').click(function () {
            {#console.log(fid)#}
            $.ajax({
                url: DELETE_AUCTION_URL,
                type: "GET",
                data: {fid: $('#btnDelete').attr('fid')},
                dataType: "JSON",
                success: function (res) {
                    if (res.status === 200) {
                        window.location.href = location.href
                    }
                }
            })
        })
    }

</script>
</body>
</html>